const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const nameBox = onBox.querySelector('.username')
// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  const login = getcookie('login')
  const info = getcookie('info')
  const id = getcookie('id')
  console.log(info,id,login);
  // 1-1. 获取到 localStorage 内的 login 信息
  if (login !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    window.location.href = './login.html'
    return
  }
  nameBox.innerText = info
}


const cartBox = document.querySelector('.cart_goods')
const allSelect = document.querySelector('.allSelect')
const totalNum = document.querySelector('.totalNum')
const totalPriceBox = document.querySelector('.totalPrice')
const content = document.querySelector('.content')
let data = JSON.parse(window.localStorage.getItem('goods'))

bindHtml()
function bindHtml(){
    let str = ''
    data.forEach(item => {
        str += `
            <li>
                <div>
                    <input type="checkbox" class="select_item" type="checkbox" ${ item.is_select ? 'checked' : '' } data-id="${ item.id }">
                </div>
                <div><img src="${ item.img_url }" alt=""></div>
                <div>
                    <h5>${ item.title }</h5>
                    <p>T98A</p>
                    <p>${ item.name }</p>
                </div>
                <div>${ item.new_price }</div>
                <div>
                    <button data-id="${ item.id }" class="sub">_</button>
                    <input type="text" value="${ item.cart_number }">
                    <button data-id="${ item.id }" class="add">+</button>
                </div>
                <div>
                    ￥${ (item.new_price * item.cart_number).toFixed(2) }
                </div>
                <ul>
                    <li class="delBtn" data-id="${ item.id }">删除</li>
                    <li class="moveTo">移动到收藏夹</li>
                </ul>
            </li>
        `    
    })
    cartBox.innerHTML = str 
     // 2-2. 渲染全选按钮, 购买总数, 总价格
    let selectNum = 0, buyNum = 0, totalPrice = 0
    data.forEach(item => {
        if (item.is_select) {
        selectNum++
        buyNum += item.cart_number
        totalPrice += item.cart_number * item.new_price
        }
    })

    allSelect.checked = data.length === selectNum
    totalNum.innerHTML =  buyNum
    totalPriceBox.innerHTML = totalPrice.toFixed(2)        
}

//对购物车页面内的点击事件进行事件委托
content.addEventListener('click', e => {
    e = e || window.event
    const target = e.target || e.srcElement
    if (target.className === 'select_item') {
        
        const goods_id = target.dataset.id - 0
        //拿到对应点击的 id 的那条数据
        const info = data.find((item)=>{ 
            return item.id === goods_id
        })   
        info.is_select = !info.is_select
        
        bindHtml()
        window.localStorage.setItem('goods', JSON.stringify(data))
    }
    //数量增加的按钮
    if (target.className === 'add') {
        // 拿到商品 id 和目前的购买数量
        const goods_id = target.dataset.id - 0
        const number = target.previousElementSibling.value - 0 + 1
        console.log(number);
        const info = data.find((item)=>{ return item.id === goods_id })
        if(number>=info.num) return
        info.cart_number++    
        bindHtml()
        window.localStorage.setItem('goods', JSON.stringify(data))
    }
    //数量减少的按钮
    if(target.className === 'sub'){
        const goods_id = target.dataset.id - 0
        const number = target.nextElementSibling.value - 0 - 1
        const info = data.find((item)=>{ return item.id === goods_id })
        if(number < 1) return alert('数量最少啦，不能再减啦！')
        info.cart_number--    
        bindHtml()
        window.localStorage.setItem('goods', JSON.stringify(data))
    }
    //删除已经选中的
    if(target.className === 'del_select'){

        data = data.filter((item)=>{ return item.is_select !== true })
        bindHtml()
        window.localStorage.setItem('goods', JSON.stringify(data)) 
    }
    //删除某一个商品
    if(target.className === 'delBtn'){
        const goods_id = target.dataset.id - 0
        const info = data.find((item)=>{ return item.id === goods_id })
        const index = data.indexOf(info,0)
        data.splice(index,1)
        console.log(data);
        bindHtml()
        window.localStorage.setItem('goods', JSON.stringify(data))
    }
    if(target.className === 'pay'){
        alert("付款成功，等待发货吧！")
    }
    if(target.className === 'moveTo'){
        alert("移动成功啦！")
    }
    if(target.className === 'move_to'){
        window.location.href = './list.html'
    }
})